<!DOCTYPE html>
<html lang="en">
<head>
	<{include file="header.html"}>
	<title>营销中心-<{$user_data['school_name']}>-德安信会计在线教育平台</title>

	<link href="/static/school/css/weixin.style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrap">
	<!--star left-->
	<div class="column">
		<{include file="left_menu.html"}>
	</div>
	<div id="ContMianBox">
		<!--star子栏目-->
		<div class="sub-colum">
		    <div class="tit">营销中心</div>
		    <ul>
		        <li class="curr"><a href="/marketing_wx">微信公众号</a></li>
		        <li ><a href="/marketing_fx">分销管理</a></li>
		        <li><a href="/marketing_card" >学习卡管理</a></li>
						
		    </ul>
		</div>
		<!--end子栏目-->
		<!--end left-->
		<div class="container narrow">
		    <!--star conter-->
		    <div class="cetContent">

					<!--star内容区域-->
					<div class="tit p-lr20">
					    <span><a href="/marketing_wx">微信公众号绑定</a></span>
					    <span class="curr" ><a href="/marketing_wx/menu">公众号菜单设置</a></span>
					</div>
					<!-- <div class="tit p-lr20">
					    <a class="c-40d064" href="/marketing_wx">微信公众号绑定</a><em class="p-lr10 c-CCCCCC fs12">/</em><em>公众号绑定</em>

					</div> -->
					<!--star内容区域-->
					<div class="mainScroll">
							<div class="mainContainer line-all">
									<!--star-->
									<div class="wx-design fix">
										<!--star左边-->
											<div class="wx-preview">
												<div class="wx-entry">
														<div class="wx-fields">鄱阳湖特产</div>
													</div>
													<div class="add-region">
														<ul class="menu_list">
																<li class="menu_item add_fisrt_item selected" onClick="JSaddMenuTips(this)">
																			<a href="javascript:void(0);" class="menu_link" title="最多添加3个一级菜单">
																					<i class="icon_menu_add"></i>
																				<span class="js_Title01">添加菜单</span>
																			</a>
																	</li>
															</ul>
													</div>
											</div>
											<!--end 左边-->
										<!--star右边-->
											<div class="wx-sidebar">
												<div id="js_none" class="menu_initial_tips tips_global" style="display:none;">点击左侧菜单进行编辑操作</div>
													<div id="js_rightBox" style="display:none;">
															<div class="editor_inner">
																	<!--star mt-->
																	<div class="menu_form_mt">
																			<h4>菜单名称</h4>
																			<div class="global_extra"><a href="javascript:void(0);" onClick="JSdelmenu(this)">删除菜单</a></div>
																	</div>
																	<!--end mt-->
																	<!--star mc-->
																	<div class="menu_form_mc" id="view">
																			<div class="frm_control_group m-t30 m-b10 subfonttip">
																					<label for="" class="frm_label"></label>
																					<div class="frm_controls">
																						已添加子级栏目，跳转网页禁止！
																					</div>
																			</div>
																			<div class="frm_control_group m-t30 m-b10">
																					<label for="" class="frm_label">
																							<strong class="title js_menuTitle">菜单名称</strong>
																					</label>
																					<div class="frm_controls">
																							<span class="frm_input_box counter_in">
																									<input class="frm_input js_menu_name" type="text" maxlength="5">
																							</span>
																							<p class="frm_msg fail js_titleEorTips">字数超过上限</p>
																							<p class="frm_msg fail js_titlenoTips">请输入菜单名称</p>
																							<p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p>
																					</div>
																			</div>
																			<div class="frm_control_group m-t30 m-b10">
																					<label for="" class="frm_label">
																							<strong class="title js_menuContent">菜单内容</strong>
																					</label>
																					<div class="frm_controls">
																							<label class="frm_radio_label"><input type="radio" checked="true">跳转网页</label>
																					</div>
																			</div>
																			<div class="menu_content">
																					<p class="tips_global p-b10">订阅者点击该子菜单会跳到以下链接</p>
																					<div class="frm_control_group">
																							<label for="" class="frm_label">页面地址</label>
																							<div class="frm_controls">
																									<span class="frm_input_box">
																									<input class="frm_input" id="urlText" name="urlText" type="text">
																									</span>
																							</div>
																					</div>
																			</div>
																	</div>
																	<!--end mc-->
															</div>
															<span class="editor_arrow_wrp">
																	<i class="editor_arrow editor_arrow_out"></i>
																	<i class="editor_arrow editor_arrow_in"></i>
															</span>
															<!--star 下面发布按钮-->
															<div class="p-t20">
															<a href="javascript:;" class="zent-btn zent-btn-40d064" style="padding:0 30px;">发布</a>
															<a href="javascript:;" class="zent-btn" style="padding:0 30px;">预览</a>
															</div>
															<!--end 下面发布按钮-->
													</div>
											</div>
											<!--end 右边-->
									</div>
									<!--end-->

							</div>
					</div>
					</div>
					<!--end内容区域-->
				</div>
				<!--end内容区域-->

		</div>


	</div>
</div>
<{include file="footer.html"}>
<script type="text/javascript">
/*
1.变量curr与变量selected有区别
2.通过这两个变量控制子集与父级
3.添加第一级绑定selected当前状态
4.添加第二级也是绑定selected当前状态，同时移除我的上一级状态selected，为了区分显示问题又在我的上一级追加了一个curr【注：有子集的时候上一级就绑定了curr（class="hasClass"）】
5.当点击第一级的时候移除curr添加selected，下一级的selected同时被移除。点击第二级的时候跟添加第二级一样的状态。
*/
var HTML_muli = '',
	HTML_subli = '',
	str = '2017-01-04',
	timestamp = new Date(str).getTime(),
	events = 'click',curr = 'hasClass',
	selected = 'selected',
	sizef1 = 'sizef1',
	sizef2 = 'sizef2',
	sizef3 = 'sizef3',
	menulist = '.menu_list',
	submenulist = '.sub_menu_list',
	eor = '.js_titlenoTips',
	nul = '.js_titleEorTips',
	not = '.js_titleNolTips',
	titdefault = '菜单名称',
	txtName = 'input.js_menu_name',
	titName = '.menu_form_mt h4',
	onetit = '.js_Title01',
	twotit = '.js_Title02',
	oneadd = '.add_fisrt_item',
	twoadd = '.add_sub_item',
	onelevel = 'li.menu_item',
	twolevel = 'li.sub_item';

//添加菜单
function JSaddMenuTips(objthis){
	$this = $(objthis);
	$this.find('span').remove();
	$this.removeClass(selected);
	$(menulist).find(oneadd).before(HTML_muli);
	var li= $(menulist).find(onelevel);
	var gh = li.length;
	if(gh==2){
		li.addClass(sizef2);
	}else if(gh==3){
		li.addClass(sizef3).removeClass(sizef2);
	}else{
		$this.hide();
		li.addClass(sizef3).removeClass(sizef2);
	}
	li.not(oneadd).addClass(selected).prev().removeClass(selected);
	li.not(oneadd).removeClass(curr);//添加菜单同级还有hasClass移除;
	li.not(oneadd).each(function(i){
		$(this).attr('id',timestamp + '_menu_'+ i)
	});
	$(eor).hide();
	JShover();
	editText();
	conGroup();
	//suiDot();
	$('.subfonttip').hide();
	$('.menu_content').show();
}

//添加子菜单
function JSsubView(objthis){//此地方有问题
	var $this = $(objthis);
	var li= $(submenulist).find(twolevel);
	$(menulist).find('li.'+selected+' '+submenulist+'').children(twoadd).before(HTML_subli);
	$(menulist).find('li.'+curr+' '+submenulist+'').children(twoadd).before(HTML_subli);
	$this.parents(''+onelevel+'.'+selected+'').addClass(curr);//添加curr，注：【我与下一排的循序不能变】
	$this.parents(''+onelevel+'.'+selected+'').removeClass(selected);//添加第二级后第一级移除selected
	$this.parents(twoadd).prev(twolevel).addClass(selected).siblings(twolevel).removeClass(selected);
	JSsubHover();
	editText();
	conGroup();
	suiDot();
	ifelse();
	$('.subfonttip').hide();
	$('.menu_content').show();
}

//父级点击选中
function JShover(){
	$(menulist).find(onelevel).not(oneadd).children('.menu_link').bind(events, function(){
		$(this).parent(onelevel).find(twolevel).removeClass(selected);//点击第一级就马上移除第二级所有存在selected值
		$(this).parent(onelevel).addClass(selected).siblings().removeClass(selected);//第一级添加绑定，同时移除同级绑定元素
		$(this).parent(onelevel).siblings().removeClass(curr);//选中第一级的时候，同级移除curr
		$(this).parent(onelevel).removeClass(curr);
		$(menulist).find(submenulist).children(twolevel).removeClass(selected);
		conGroup();
		suiDot();
	});
}

//子级点击选中
function JSsubHover(){
	$(submenulist).find(twolevel).bind(events, function(){
		$(this).parents(''+onelevel+'.'+selected+'').addClass(curr);
		$(this).parents(''+onelevel+'.'+selected+'').removeClass(selected);//添加第二级后第一级移除selected
		$(this).parents(''+onelevel+'.'+selected+'').find('.sub_menu_box').show();
		$(this).addClass(selected).siblings().removeClass(selected);
		conGroup();
		//suiDot();
		ifelse();
		$('.subfonttip').hide();
		$('.menu_content').show();
	});
}

//如果有子集就显示图标
function suiDot(){
	var subli1 = $(menulist).find(''+onelevel+'.'+curr+'').find(submenulist).children(twolevel);
	var subli2 = $(menulist).find(''+onelevel+'.'+selected+'').find(submenulist).children(twolevel);
	if(subli1.length>0 || subli2.length>0){
		$(menulist).find(''+onelevel+'.'+curr+' .menu_link i.icon_menu_dot').css({'display':'inline-block'});//如果有子集父级显示图标
		$('.subfonttip').show();//子级文字提示！请根据你想要的修改
		$('.menu_content').hide();
	}else{
		$(menulist).find(''+onelevel+'.'+curr+' .menu_link i.icon_menu_dot').css({'display':'none'});
		$('.subfonttip').hide();
		$('.menu_content').show();
		//$(menulist).find(''+onelevel+'.'+curr+'').addClass(selected).removeClass(curr);
	}
}

//点击赋值
function conGroup(){
	$('#js_rightBox').show().siblings('#js_none').hide();
	var li = $(menulist).find('li').not(oneadd);
	li.each(function(){
		if($(this).hasClass(selected)){
			var val = $(this).find(onetit).html();
			$(txtName).val(val);
			$(titName).html(val);
		}
		if($(menulist).find(onelevel).hasClass(selected)){
			$('.js_menuTitle').text(titdefault);
		}else{
			$('.js_menuTitle').text('子'+titdefault);
		}
	});

}

//输入状态
function editText(){
	var thisContent = $(txtName);
	thisContent.change(function(){
		ifelse();
	})
};

//输入赋值
function ifelse(){
	var thisContent = $(txtName);
	if(thisContent.val().length > 5){
		$(nul).show();
	}else{
		$(nul).hide();
	}

	var oneli = $(menulist).find(onelevel).not(oneadd);
	var twoli = $(menulist).find(twolevel).not(twoadd);
	if($(menulist).find('li.menu_item.selected').children('a').hasClass('menu_link')){
		if(thisContent.val() == ''){
			$(menulist).find(''+onelevel+'.'+selected+' a.menu_link').children(onetit).text(titdefault);
			$(titName).text(titdefault);
			$(eor).show();
		}else{
			$(menulist).find(''+onelevel+'.'+selected+' a.menu_link').children(onetit).text(thisContent.val());
			$(titName).text(thisContent.val());
			$(eor).hide();
		}
	}else{
		if(thisContent.val() == ''){
			$(submenulist).find(''+twolevel+'.'+selected+' a').find(onetit).text('子'+titdefault);
			$(titName).text('子'+titdefault);
			$(eor).show();
		}else{
			$(submenulist).find(''+twolevel+'.'+selected+' a').find(onetit).text(thisContent.val());
			$(titName).text(thisContent.val());
			$(eor).hide();
		}
	}
}

//点击删除菜单
function JSdelmenu(){
	var li = $(menulist).find('li');
	var oneli = $(menulist).find(onelevel);
	var twoli = $(menulist).find(twolevel).not(twoadd);
	li.attr('class',function(){
		var attrClass = $(this).attr('class');
		if(attrClass == 'sub_item selected'){//删除子集
			$(submenulist).find(''+twolevel+'.'+selected+'').remove();
		}
		if(oneli.not(oneadd).hasClass(selected)){
			$(menulist).find(''+onelevel+'.'+selected+'').not(oneadd).remove();
			$(menulist).find(oneadd).show();
			var gh = oneli.length - 1;
			if(gh==3){
				oneli.addClass(sizef3).removeClass(sizef2);
			}else if(gh==2){
				oneli.addClass(sizef2).removeClass(sizef3);
			}else{
				oneli.removeClass(sizef2);
				$(menulist).find(oneadd).show().addClass(selected);
				$(menulist > oneadd).find('a').append('<span class="js_Title01">添加菜单</span>')
			}
		}
		$('#js_rightBox').hide().siblings('#js_none').show();
	});
	suiDot();
}

$(function(){
	HTML_muli = '<li class="menu_item">'+
					'<a href="javascript:void(0);" class="menu_link"><i class="icon_menu_dot"></i><span class="js_Title01">菜单名称</span></a>'+
					'<div class="sub_menu_box"><ul class="sub_menu_list">'+
						'<li class="add_sub_item"><a onClick="JSsubView(this)" href="javascript:void(0);" title="最多添加5个子菜单"><span class="sub_menu_inner"><i class="icon_menu_add"></i></span></a></li>'+
						'<i class="arrow arrow_out"></i><i class="arrow arrow_in"></i>'+
					'</ul></div>'+
				'</li>';
	HTML_subli = '<li class="sub_item"><a href="javascript:void(0);"><span class="sub_menu_inner"><span class="js_Title01">子菜单名称</span></span></a></li>';

})
</script>
</body>
</html>
